import CodeBlock from "@theme/CodeBlock";

import CoordinatesGenerator from "@site/src/components/CoordinatesGenerator";

Masks are used to exclude certain areas in the image from motion detection.
All movement within the mask will be ignored.

The `coordinates` form a polygon around the masked area.<br></br>
To easily generate `coordinates` you can use a tool like [image-map.net](https://www.image-map.net/).<br></br>
Just upload an image from your camera, choose the `Poly` shape and start drawing your mask.<br></br>
Then click **Show me the code!** and adapt it to the config format.<br></br>
Coordinates `coords="522,11,729,275,333,603,171,97"` should be turned into this:

<CodeBlock language="yaml" showLineNumbers>
  {`${
    props.meta && props.meta.name
      ? props.meta.name
      : "<motion detector component>"
  }:
  motion_detector:
    cameras:
      camera_one:
        ...
        // highlight-start
        mask:
          - coordinates:
              - x: 522
                y: 11
              - x: 729
                y: 275
              - x: 333
                y: 603
              - x: 171
                y: 97
        // highlight-end`}
</CodeBlock>

<CoordinatesGenerator meta={props.meta} domain={"motion_detector"} />
